<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" top="5vh" @close.native="cancel" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="设施/仪器名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入" :disabled="isLook" />
        </el-form-item>
        <el-form-item label="预约方式：" prop="typeName">
          <el-radio-group v-model="form.typeName">
            <el-radio v-for="(item, index) in selectArr4" :key="index" :label="item">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预约时间：" prop="domainName">
          <el-input v-model="form.domainName" placeholder="请输入" :disabled="isLook" />
        </el-form-item>
        <el-form-item label="开放预约时段：" prop="departmentName">
          <el-input v-model="form.departmentName" placeholder="请输入" :disabled="isLook" />
        </el-form-item>
        <el-form-item label="最大可预约时长：" prop="reporter">
          <el-input v-model="form.reporter" placeholder="请输入" :disabled="isLook" />
        </el-form-item>
        <el-form-item label="是否学习考核：" prop="requirementContent">
          <el-radio-group v-model="form.requirementContent">
            <el-radio label="需要考核">需要考核</el-radio>
            <el-radio label="不需要考核">不需要考核</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否预约审核：" prop="requirementContent2">
          <el-radio-group v-model="form.requirementContent2">
            <el-radio label="需要审核">需要审核</el-radio>
            <el-radio label="不需要审核">不需要审核</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否支持取消：" prop="requirementContent2">
          <el-radio-group v-model="form.requirementContent3">
            <el-radio label="支持">支持</el-radio>
            <el-radio label="不支持">不支持</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="相关文件：" prop="remark">
          <el-upload v-if="!isLook" ref="uploadRef" class="upload-demo" action="#" :limit="1" :on-change="handleChange" :auto-upload="false"
            :show-file-list="false" :on-exceed="handleExceed" :accept="accept">
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
            <div slot="tip" class="el-upload__tip">
              只支持上传.doc/.docx/.pdf文件
            </div>
            <div slot="tip" class="el-upload__tip" v-if="form.requirementFileName">
              <el-tag closable @close="closeFile">
                {{form.requirementFileName}}
              </el-tag>
            </div>
          </el-upload>
          <div v-else style="padding-top: 5px;">
            <el-link type="primary" :underline="false">
              {{ form.requirementFileName?form.requirementFileName:'暂无文件' }}
            </el-link>
            <el-button style="margin-left: 15px;" type="primary" size="mini" :underline="false" @click="lookLink(form)">
              预览
            </el-button>
            <el-button style="margin-left: 15px;" type="primary" size="mini" :underline="false" @click="downloadLink(form)">
              下载
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!isLook">确 定</el-button>
        <el-button @click="
          cancel">取 消</el-button>
      </div>
    </el-dialog>
    <PreviewPdf v-if="showPdf" :pdfUrl="pdfUrl" @closeLookPdf="closeLookPdf" />
  </div>
</template>

<script>
import { uploadFile, deleteFile, getWord2Pdf } from '@/api/common.js'
import { addRequirement, updateRequirement } from '@/api/requirement.js'
import PreviewPdf from '@/views/common/previewPdf.vue'
export default {
  components: { PreviewPdf },
  data() {
    return {
      showPdf: false,
      pdfUrl: null,
      dialogVisible: false,
      isLook: false,
      accept: '.doc,.docx,.pdf',
      title: '',
      form: {
        name: '',
        domainName: '',
        departmentName: '',
        requirementContent: '需要考核',
        requirementContent2: '需要审核',
        requirementContent3: '支持',
        requirementFileName: '',
        requirementFilePath: '',
        requirementFileOriginPath: ''
      },
      rules: {
        name: [
          { required: true, message: '需求名称不能为空！', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '单位名称不能为空！', trigger: 'blur' }
        ],
        requirementContent: [
          { required: true, message: '需求内容不能为空！', trigger: 'blur' }
        ]
      },
      selectArr4: [
        '按机时预约', '按次数预约', '按项目预约', '送样检测'
      ],
    }
  },
  created() { },
  methods: {
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title
      if (this.title == '详情') {
        this.isLook = true
      }
      if (obj.data) {
        this.form = Object.assign(this.form, obj.data)
      }
    },
    downloadLink(item) {
      this.downloadByUrl(item.fileName, item.requirementFilePath)
    },
    lookLink(item) {
      let txt = this.getMatchType(item.requirementFilePath)
      if (txt === 'word') {
        getWord2Pdf({ wordPath: item.requirementFilePath }).then(res => {
          if (res.data) {
            this.lookPdf(res.data)
          } else {
            this.$message.warning('暂无法预览，请下载后查看！')
          }
        })
      } else {
        if (txt === 'pdf') {
          this.lookPdf(item.requirementFilePath)
        } else {
          this.$message.warning('文件不支持预览！')
        }
      }
    },
    lookPdf(url) {
      this.pdfUrl = url
      this.showPdf = true
    },
    closeLookPdf() {
      this.showPdf = false
      this.pdfUrl = null
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateRequirement(this.form).then(() => {
              this.cancel()
            })
          } else {
            addRequirement(this.form).then(() => {
              this.cancel()
            })
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.isLook = false
      this.$emit('close')
    },
    handleChange(file) {
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      formData.append('pathType', file.name.split('.').pop())
      uploadFile(formData).then(res => {
        this.form.requirementFileName = res.data.fileName
        this.form.requirementFileOriginPath = res.data.filePath
        this.form.requirementFilePath = res.data.servicePath
      })
      // this.form.fileUpload = file.raw
      // console.log('[ file ] >', this.form.fileUpload)
    },
    // 多次上传覆盖
    handleExceed(file) {
      this.$refs.uploadRef.clearFiles()
      this.handleChange(file[0])
    },
    closeFile() {
      deleteFile({ files: [this.form.requirementFileOriginPath] }).then(() => {
        this.form.requirementFileName = ''
        this.form.requirementFileOriginPath = ''
        this.form.requirementFilePath = ''
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>